import React from 'react';
import styles from './index.less';
import { Button, Row, Col } from 'antd';
import { connect } from 'umi';
import commonPkg from '@/utils/commonPkg';
import IconFont from '@basicComp/IconFont';
import { getWorkspaceList } from '@/network/api/commonApi';
import { parseParam } from '@/utils/urlUtil';
import moment from 'moment';

const { classNames } = commonPkg;

const data = [
  { title: '用户管理', path: '/userConf' },
  { title: 'user', path: '/user' },
  { title: '纯html', path: '/purehtml' },
  { title: 'vue2', path: '/vue2' },
  { title: 'vue3', path: '/vue3' },
  { title: '联邦模块', path: '/remoteComp' },
  { title: '跨项目组件', path: '/qiankunComp' },
];

@connect(({ home }) => ({
  home,
}))
export default class extends React.Component {
  componentDidMount = async () => {
    // await this.getList();
    setTimeout(() => {
      this.swiperInit();
    }, 200);
  };
  // 轮播初始化
  swiperInit = () => {
    const This = this;
    var swiper = (this.swiper = new Swiper('.swiper-container', {
      loop: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    }));
  };
  getList = async () => {
    var rs = await getWorkspaceList({
      params: { pageSize: 10000000, pageNum: 1 },
    });
    if (rs.success) {
      var list = [...rs.data];
      var bannerList = [];
      list.forEach((item, i) => {
        var index = parseInt(i / 6);
        if (!!bannerList[index]) {
          bannerList[index].push(item);
        } else {
          bannerList[index] = [item];
        }
      });
      this.props.dispatch({
        type: 'home/setState',
        payload: {
          bannerList: bannerList,
        },
      });
    }
  };
  render() {
    const { bannerList } = this.props.home;
    return (
      <div>
        <div className={styles.swiper}>
          <div class="swiper-container">
            <div class="swiper-wrapper">
              {bannerList.map((item, i) => {
                return (
                  <div
                    className={classNames([styles.swiperSlide, 'swiper-slide'])}
                  >
                    <Row gutter={[20, 20]}>
                      {item.map((item2, i) => {
                        console.log(item2);
                        return (
                          <Col span={8}>
                            <div className={styles.item}>
                              <img
                                className={styles.topLeft}
                                src={require('../img/jiao.png')}
                              />
                              <img
                                className={styles.bottomRight}
                                src={require('../img/jiao.png')}
                              />

                              <div className={styles.title}>
                                <div className={styles.left}>{item2.name}</div>
                                <div className={styles.right}>
                                  {/* <Button
                                    icon={<IconFont type="icon-peizhi" />}
                                    href={parseParam('/workSpace/createSpace', {
                                      spaceId: item2.id,
                                    })}
                                    target="_blank"
                                  >
                                    配置
                                  </Button> */}
                                </div>
                              </div>

                              <div className={styles.time}>
                                <span className={styles.dian}></span>
                                创建时间:
                                {moment(item2.createTime).format('lll')}
                              </div>

                              <Row gutter={[15, 15]}>
                                {data.map((ite, i) => {
                                  return (
                                    <Col span={8}>
                                      <div className={styles.buttonSty}>
                                        <Button
                                          style={{ width: '100%' }}
                                          href={parseParam(ite.path, {
                                            spaceId: item2.id,
                                          })}
                                          target="_blank"
                                        >
                                          {ite.title}
                                        </Button>
                                      </div>
                                    </Col>
                                  );
                                })}
                              </Row>
                            </div>
                          </Col>
                        );
                      })}
                    </Row>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
        <div className={styles.option}>
          <div class="swiper-pagination"></div>
        </div>
      </div>
    );
  }
}
